<template>
	<van-nav-bar title="个人中心" />
	<div class="myindex">
		<img class="user-poster"
			src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg11.51tietu.net%2Fpic%2F2019112009%2Fazwgk4dlam1azwgk4dlam1280x180.jpeg&refer=http%3A%2F%2Fimg11.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669792187&t=609ce7830e3680ec0e33b4bfeb890a9b" />
		<div class="user-header">
			<van-image round width="2rem" height="2rem" fit="cover" position="center" v-if="userheaderimg"
					:src="userheaderimg"/>
			<p class="name">{{usernick}}</p>
		</div>
		<van-row class="user-links">
			<van-col span="6">
				<van-icon name="pending-payment" />
				待付款
			</van-col>

			<van-col span="6">
				<van-icon name="tosend" />
				待发货
			</van-col>
			<van-col span="6">
				<van-icon name="logistics" />
				待收货
			</van-col>
			<van-col span="6">
				<van-icon name="records" />
				待评价
			</van-col>
		</van-row>

		<van-cell-group class="user-group">
			<van-cell icon="records" title="全部订单" is-link to="/order" />
		</van-cell-group>

		<van-cell-group>
			<van-cell icon="points" title="我的积分" is-link />
			<van-cell icon="gold-coin-o" to="/coupon" title="我的优惠券" is-link />
			<van-cell icon="gift-o" title="我收到的礼物" is-link />

			<!-- <van-cell icon="friends-o" title="我的评价" is-link  @click="onEvaluate"/>
			<van-cell icon="setting-o" title="设置" is-link />
			<van-cell icon="desktop-o" title="检查更新" is-link /> -->
		</van-cell-group>
		<van-button type="danger" class="btn" @click="onExit">退出</van-button>

	</div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

const store = useUserStore()
const user: IUser = store.userInfo
interface IUser {
	nick: string
	headerimg: string
}
const router = useRouter()
const usernick=localStorage.getItem('usernick')
const userheaderimg=localStorage.getItem('userheaderimg')
const onExit =  ()=> {
	localStorage.removeItem('TOKEN')
	setTimeout(()=>{
				router.replace({path:'/'})
			},1000)
	
	Toast.success('退出成功')
	// 删除用户头像，和昵称信息
	store.clearUser({nick: '', headerimg: ''})
	localStorage.removeItem('userheaderimg')
	localStorage.removeItem('usernick')
}


const onEvaluate  =  ()=>{
	router.push({path:"/evaluate"})
}


</script>

<style lang="scss" scoped>
.user {
	&-poster {
		width: 100%;
		height: 53vw;
		display: block;
	}

	&-group {
		margin-bottom: 15px;
	}

	&-header {
		position: absolute;
		top: 105px;
		left: 146px;
		// border: 2px solid #e7e7e7;
		text-align: center;

		.name {
			color: #fff;
			font-size: 16px;
		}
	}

	&-links {
		padding: 15px 0;
		font-size: 12px;
		text-align: center;
		background-color: #fff;

		.van-icon {
			display: block;
			font-size: 24px;
		}
	}

}

.btn {
	width: 80%;
	height: 40px;
	border-radius: 10px;
	margin-left: 40px;
	margin-top: 50px;
}
</style>
